<!DOCTYPE HTML>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:include="public/layout::header('菜单列表')" th:remove="tag"></div>
    <link rel="stylesheet" type="text/css" href="/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" />

    <style type="text/css">
        .ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
        .ztree li span.button.icon01{margin:0; background: url(/lib/zTree/v3/css/zTreeStyle/img/diy/3.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
    </style>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 菜单列表 <span class="c-gray en">&gt;</span> 节点列表 <a class="btn btn-success radius r btn-refresh" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
    <div class="cl pd-5 bg-1 bk-gray mt-20">
        <span class="l">
            <a href="javascript:;" onclick="layer_show('添加','add?pId=0',800,500);" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i> 添加</a>
        </span>
    </div>
    <ul id="treeDemo" class="ztree"></ul>
</div>
<!--_footer 作为公共模版分离出去-->
<div th:include="public/layout::footer" th:remove="tag"></div>
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/lib/laypage/1.2/laypage.js"></script>

<script type="text/javascript" src="/lib/zTree/v3/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="/lib/zTree/v3/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="/lib/zTree/v3/js/jquery.ztree.exedit-3.5.js"></script>
<SCRIPT type="text/javascript">

    var setting = {
        view: {
            addHoverDom: addHoverDom,
            removeHoverDom: removeHoverDom,
            selectedMulti: false,
        },
        edit: {
            enable: true,
            editNameSelectAll: true,
            showRemoveBtn: showRemoveBtn,
            showRenameBtn: showRenameBtn
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeDrag: beforeDrag,
            beforeEditName: beforeEditName,
            beforeRemove: beforeRemove,
            beforeRename: beforeRename,
            onRemove: onRemove,
            onRename: onRename
        }
    };

    var zNodes =[
        { id:1, pId:0, name:"父节点 1", open:true},
        { id:11, pId:1, name:"叶子节点 1-1"},
    ];
    var  className = "dark";
    function beforeDrag(treeId, treeNodes) {
        return false;
    }
    function beforeEditName(treeId, treeNode) {
        className = (className === "dark" ? "":"dark");
//        showLog("[ "+getTime()+" beforeEditName ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.selectNode(treeNode);
//        alert("修改"+treeNode.id);
        layer_show("修改节点","update?id="+treeNode.id,800,500);
        return false;
    }
    function beforeRemove(treeId, treeNode) {
        className = (className === "dark" ? "":"dark");
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.selectNode(treeNode);
        var res=confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
        if(res){
            $.ajax({
                type: 'POST',
                url: 'delete',
                dataType: 'json',
                data:{id:treeNode.id},
                success: function(data){
                    if(data.code==0){
                        layer.msg(data.msg,{icon:1,time:3000});
                        location.reload();
                    }else{
                        layer.msg(data.msg,{icon:1,time:3000});
                    }
                },
                error:function(data) {
                    console.log(data.msg);
                }
            });
        }

        return false;
    }
    function onRemove(e, treeId, treeNode) {

    }
    function beforeRename(treeId, treeNode, newName, isCancel) {
        className = (className === "dark" ? "":"dark");

        if (newName.length == 0) {
            setTimeout(function() {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.cancelEditName();
//                alert("节点名称不能为空.");
            }, 0);
            return false;
        }
        return true;
    }
    function onRename(e, treeId, treeNode, isCancel) {

    }
    function showRemoveBtn(treeId, treeNode) {
        return true;
    }
    function showRenameBtn(treeId, treeNode) {
        return true;
    }

    function getTime() {
        var now= new Date(),
            h=now.getHours(),
            m=now.getMinutes(),
            s=now.getSeconds(),
            ms=now.getMilliseconds();
        return (h+":"+m+":"+s+ " " +ms);
    }

    var newCount = 1;
    function addHoverDom(treeId, treeNode) {
        var sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
        var addStr = '<span class="button add" id="addBtn_' + treeNode.tId + '" title="添加" onfocus="this.blur();"></span>';
        sObj.after(addStr);
        var btn = $("#addBtn_"+treeNode.tId);



        if (btn) btn.bind("click", function(){
//            alert(treeNode.id);
            layer_show("添加节点","add?pId="+treeNode.id,800,500);
//            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
//            zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
            return false;
        });
        var setNodeStr = '<span class="button icon01" id="setNodeBtn_' + treeNode.tId + '" title="授权节点" onfocus="this.blur();"></span>';
        sObj.after(setNodeStr);
        var setNodebtn = $("#setNodeBtn_"+treeNode.tId);
        if (setNodebtn) setNodebtn.bind("click", function(){
            layer_show("授权节点","setNode?menu_id="+treeNode.id,800,500);
            return false;
        });
    };
    function removeHoverDom(treeId, treeNode) {
        $("#addBtn_"+treeNode.tId).unbind().remove();
        $("#setNodeBtn_"+treeNode.tId).unbind().remove();
    };
    function selectAll() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.setting.edit.editNameSelectAll =  $("#selectAll").attr("checked");
    }

    $(document).ready(function(){
        loadMenus();

    });

    function loadMenus() {
        $.ajax({
            type: 'POST',
            url: 'menulist',
            dataType: 'json',
            data:{},
            success: function(data){
                if(data.code==0){
                    console.log(data.data);
                    zNodes=data.data;
                    $.each(zNodes,function (index,zNode) {
                        zNodes[index].open=true;
                    });
//                    console.log(zNodes);
                    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                    $("#selectAll").bind("click", selectAll);
                }else{
                    layer.msg(data.msg,{icon:1,time:3000});
                }

            },
            error:function(data) {
                console.log(data.msg);
            }
        });
    }

</SCRIPT>

</body>
</html>